<template>
  <div class="header">
    <img :src="logo" height="50" alt="" title=""/>

    <div class="menu">
      <el-menu :default-active="menuIndex" class="el-menu-demo" mode="horizontal"
               background-color="#fff"
               text-color="#333333"
               active-text-color="#1890FF"
               active-background-color="#fff">
        <!--target="_blank"-->
        <el-menu-item v-for="(item,index) in menuList" :key="index" :index="index.toString()"><a :href="item.url=='index'?'/':item.url">{{item.name}}</a></el-menu-item>
        <el-menu-item index="6"><a href="/news">新闻资讯</a></el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'el-header',
    componentName: 'ElHeader',

    //import引入的组件需要注入到对象中才能使用
    // components: { echars },
    data() {
      //这里存放数据
      return {
        menuIndex: "0",

        menuList:[],
        logo:'',

      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      //获取导航
      getMenu() {
        if(!this.menuList){
          return
        }
        let that = this;
        this.$http
          .post(this.$api.default.menuList,)
          .then(res => {
            // console.log('数据', res)
            that.menuList = res.data;
            localStorage.setItem('menuList',res.data);
          }).catch(error => {
        })
          .then(() => {
          });
      },
      //获取logo
      getLogo() {
        this.logo = localStorage.getItem('LOGO');
        if(this.logo){
          return
        }
        console.log('请求LOGO');
        let that = this;
        this.$http
          .post(this.$api.default.aboutUs,)
          .then(res => {
            // console.log('数据', res);
            that.logo = that.$api.default.url_ + res.data[1].value;
            localStorage.setItem('LOGO',that.logo);
          }).catch(error => {
        })
          .then(() => {
          });
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      //获取菜单第几个
      // console.log(this.$route.path)
      var path_ = this.$route.path;
      if(path_ == '/home'||path_ == '/'){
        //首页
        this.menuIndex = '0'
      }else if(path_ == '/trademark-service'){
        //商标
        this.menuIndex = '1'

      }else if(path_ == '/design-services'){
        //设计
        this.menuIndex = '4'
      }else if(path_ == '/copyright-services'){
        //版权
        this.menuIndex = '2'
      }else if(path_ == '/patent-services'){
        //专利
        this.menuIndex = '3'
      }else if(path_ == '/enterprise-introduction'){
        //公司介绍
        this.menuIndex = '5'
      }else if(path_ == '/news'){
        //新闻资讯
        this.menuIndex = '6'
      }
      else if(path_ == '/newsMess'){
        //新闻详情
        this.menuIndex = '6'
      }

      this.getMenu();
      this.getLogo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}, //生命周期 - 创建之前
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    //生命周期 - 更新之前
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
  };
</script>
<style scoped>
  .el-menu--horizontal>.el-menu-item{
    height: 70px;
    line-height: 70px;
  }
  .el-menu--horizontal>.el-submenu >>> .el-submenu__title{
    height: 70px;
    line-height: 70px;
  }
  .el-menu--horizontal>.el-menu-item:hover,
  .el-menu--horizontal>.el-submenu >>> .el-submenu__title:hover{
    background: #fff!important;
    border-bottom: 2px solid #409EFF!important;
    color: #409EFF!important;
  }
  .header{
    width: 1200px;
    margin: auto;
  }
  .header > img{
    margin: 9px 0;
  }
  .menu{
    float: right;
  }
  .menu >>> .el-menu-item{
    font-size: 18px;
    padding: 0;
  }
  .menu >>> .el-menu-item a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
</style>


